/* page{
  background-color: #999999;
} */
/* view{
   使用 主题颜色 
   color: var(--themeColor); 
 }*/
//  轮播图
.index_swiper {

  // 一套代码相对固定: swiper和image
  swiper {
    width: 750rpx;
    height: 340rpx;

    image {
      width: 100%;
    }
  }
}

// 导航栏
.index_cate {
  display: flex;

  navigator {
    // 四个盒子,均等占比父容器.index_cate
    flex: 1;
    // navigator只能使用flex,不能使用justify-content
    padding: 20rpx;

    image {
      /* 
      1 因为image有默认宽
      2 image标签也存在默认的宽度和高度(默认的宽高)
           320px * 240px (默认是一个类似正方形) 
      */
      width: 100%;
    }
  }
}

// 楼层
.index_floor {

  // border: 1px solid green;
  .floor_group {
    .floor_title {
      width: 750rpx;
      // image使用了mode="widthFix"后, 外面的view自带有多余高度,需要重新调整,去除多余高度
      // height: 59rpx;

      // border: 1rpx solid red;
      image {
        // 图片默认有白色边框，去除
        // display: block;
        // border: 1px solid green;
        width: 100%;
      }
    }

    .floor_list {
      display: flex;
      margin-left:10rpx;
      margin-bottom: 10rpx;
      // width: 760rpx;
      // border: 1px solid red;
      // padding: 0 5rpx;
      // 不用清除浮动,本来就要右边图片上来
      // overflow: hidden;

      .left-img-box {
        width: 250rpx;
        height: 500rpx;
        // border: 1px solid rgb(34, 0, 255);
        // float: left;
        margin-right: 10rpx;
        
        // display: flex;
        // padding: 10rpx;
        // height: 400rpx;
        // navigator {
          // display: flex;
        // justify-self: center;
        // border: 1px solid yellow;

          image {
            // display: block;
            // border: 1px solid red;
            width: 250rpx;
            // float: left;
            // padding: 5rpx;
            // justify-content: center;
            // align-items: center;
            // width: 100%;
          }
        // }
      }

      .right-img-box {
        width: 480rpx;
        height: 500rpx;
        display: flex;
        // flex-direction: column;
        flex-wrap: wrap;
        // justify-content:space-around;
        // align-items:center;
        // border-size 自身占位
        // border: 1rpx solid rgb(255, 0, 106);
        // background-color: aqua;
        
        navigator {
          // flex: 1;
          // display: block;
          // padding: 12.5rpx;          
          // width: 250rpx;
          // padding: 10rpx;

          // border: 1px solid rgb(0,255, 0);
          // padding-left: 10rpx;
          // justify-content:center;
          // align-items: center;
          image {
            // 图片之间可以将间歇清除; 如果没有这个选项,那么,默认有一个白色线条,来区分
            // 只管右边的4个图片
            // display: block;
            // border: 1px solid #00ff33;
            // 带有navigator循环标签,不使用
            // justify-content:space-evenly;
            width: 230rpx;
            // padding-right: 10rpx;
            // height: 250rpx;
            // 右边四个图片是正方形,适合配合padding使用
            // padding: 10rpx;
            // padding: 10rpx;
            margin-right: 10rpx;
            // margin-bottom: 10rpx;
          }
        }
      }

      // display: flex;
      // flex-wrap: wrap;
      // flex-direction: column;
      // navigator {
      //   // justify-content:end;
      //   // flex: 1;
      //   // display: flex;
      //   padding: 10rpx;

      // }
    }



  }
}